// import { ipcRenderer } from 'electron'

export const TitleBar = defineComponent({
  setup(_, { slots }) {
    const handleClose = () => {
      // ipcRenderer.invoke('close')
      window.close()
    }
    // const isMaximizedRef = ref(false)

    // const handleRestore = () => ipcRenderer.invoke('restore')
    // const handleMaximize = () => ipcRenderer.invoke('maximize')
    // const handleMinimize = () => ipcRenderer.invoke('minimize')

    const rootRef = ref<HTMLDivElement>()

    onMounted(() => {
      const style = rootRef.value?.style

      if (style) {
        style['-webkit-app-region'] = 'drag'
      }
    })

    // const onMaximize = () => (isMaximizedRef.value = true)
    // const onUnmaximize = () => (isMaximizedRef.value = false)

    // onMounted(() => {
    //   ipcRenderer.on('maximize', onMaximize)
    //   ipcRenderer.on('unmaximize', onUnmaximize)
    // })

    // onUnmounted(() => {
    //   ipcRenderer.removeListener('maximize', onMaximize)
    //   ipcRenderer.removeListener('unmaximize', onUnmaximize)
    // })

    return () => (
      <div
        ref={rootRef}
        class="un-flex un-items-center un-justify-between un-pl-12px"
        style="--layout-header-height: 40px;--hover-color: #FF4D4F;height: var(--layout-header-height);"
      >
        <div>{slots.default?.()}</div>
        {/* <CLayoutHeaderTool onClick={handleMinimize}>
          <NIcon size={16}>
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M929.8 528.1H93.5c-15.5 0-28-12.5-28-28s12.5-28 28-28h836.3c15.5 0 28 12.5 28 28s-12.5 28-28 28z"
                fill="currentColor"
              />
            </svg>
          </NIcon>
        </CLayoutHeaderTool>
        {isMaximizedRef.value ? (
          <CLayoutHeaderTool onClick={handleRestore}>
            <NIcon size={16}>
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M256 128l0 192L64 320l0 576 704 0 0-192 192 0L960 128 256 128zM704 832 128 832 128 384l576 0L704 832zM896 640l-128 0L768 320 320 320 320 192l576 0L896 640z"
                  fill="currentColor"
                />
              </svg>
            </NIcon>
          </CLayoutHeaderTool>
        ) : (
          <CLayoutHeaderTool onClick={handleMaximize}>
            <NIcon size={16}>
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M853.504 170.496v682.496H170.496V170.496h683.008m4.096-64h-691.2c-32.768 0-59.392 26.624-59.392 59.392v691.712c0 32.768 26.624 59.392 59.392 59.392h691.712c32.768 0 59.392-26.624 59.392-59.392v-691.2c0-33.28-26.624-59.904-59.904-59.904 0.512 0 0 0 0 0z"
                  fill="currentColor"
                />
              </svg>
            </NIcon>
          </CLayoutHeaderTool>
        )} */}
        <CLayoutHeaderTool onClick={handleClose} style="-webkit-app-region: no-drag;">
          <NIcon size={16}>
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M853.333333 811.918222L811.918222 853.333333 512 553.415111 212.081778 853.333333 170.666667 811.918222 470.584889 512 170.666667 212.081778 212.081778 170.666667 512 470.584889 811.918222 170.666667 853.333333 212.081778 553.415111 512 853.333333 811.918222z"
                fill="currentColor"
              />
              <path
                d="M853.333333 811.918222L811.918222 853.333333 512 553.415111 212.081778 853.333333 170.666667 811.918222 470.584889 512 170.666667 212.081778 212.081778 170.666667 512 470.584889 811.918222 170.666667 853.333333 212.081778 553.415111 512 853.333333 811.918222z"
                fill="currentColor"
              />
            </svg>
          </NIcon>
        </CLayoutHeaderTool>
      </div>
    )
  },
})
